<template>
  <FGDialog
    class="Fg-Editor-Dialog"
    ref="FGDialog"
    width="900px"
    title="全局事件"
    top="10vh"
    @confirm="onConfirm"
  >
    <el-row>
      <el-col :span="8" :style="{padding:'0 16px'}">
        <EditorLeft v-model="active" :list.sync="list" disabled />
      </el-col>
      <el-col :span="16">
        <template v-for="(item,i) in list">
          <CodeEditor
            v-if="active==i && list[active]"
            :key="i"
            v-model="list[active].code"
            :name="list[active].name"
            mode="text/javascript"
            :placeholder="item.placeholder"
          />
        </template>
      </el-col>
    </el-row>
  </FGDialog>
</template>

<script>
import CodeEditor from "./CodeEditor";
import EditorLeft from "./components/EditorLeft.vue";
import store from "@/store";
import { deepClone } from "../formGenerator/utils";
export default {
  components: {
    CodeEditor,
    EditorLeft,
  },
  props: {
    modelValue: {
      type: Array,
      default: () => [],
    },
  },

  data() {
    return {
      active: this.modelValue.length ? 0 : "",
      list: deepClone(this.modelValue),
    };
  },

  methods: {
    open() {
      this.$refs.FGDialog.open();
      this.list = deepClone(this.modelValue);
      store.commit("SET_EVENTLIST", this.list);
    },
    onConfirm() {
      this.$refs.FGDialog.close();
      this.$emit("input", this.list);
      this.$emit("confirm", this.list);
      store.commit("SET_EVENTLIST", this.list);
    },
  },
};
</script>

<style lang="scss" >
@import "@/components/formGenerator/styles/generator.scss";
.Fg-Editor-Dialog {
  .el-row {
    height: 100%;
    border: 1px solid $borderColor;
    .el-col {
      height: 100%;
    }
    .el-col:first-child {
      border-right: 1px solid $borderColor;
    }
  }
}
</style>